<template>
  <div v-show="visible" class="message-panel">
    <div class="drawer-content">
      <transition :name="transitionName">
        <!-- 私信列表页面 -->
        <div v-if="!currentUserId" class="page-container">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="私信" name="private">
            <div class="message-list">
                <div v-for="msg in sixinList"
                     :key="msg.lastMsgId"
                     class="message-item"
                     @click="openChat(msg)">
                  <div class="message-item-content">
                    <div class="avatar-wrapper">
                      <el-avatar :src="msg.avatarUrl" :size="45" />
                      <div v-if="msg.userType === 4" class="vip-icon">V</div>
                    </div>
                <div class="message-info">
                  <div class="message-header">
                    <span class="nickname">{{ msg.nickname }}</span>
                        <span class="time">{{ msg.lastMsgTime }}</span>
                      </div>
                      <div class="message-content">{{ msg.title }} {{ msg.msg }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="评论" name="comment">
              <div class="message-list empty-container">
                <el-empty
                  description="暂无评论消息"
                  :image-size="80"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="@我" name="at">
              <div class="message-list empty-container">
                <el-empty
                  description="暂无@我消息"
                  :image-size="80"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="通知" name="notification">
              <div class="message-list empty-container">
                <el-empty
                  description="暂无通知消息"
                  :image-size="80"
                />
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 聊天详情页面 -->
        <div v-else class="page-container">
          <div class="chat-header">
            <el-icon class="back-btn" @click="backToList"><ArrowLeft /></el-icon>
            <span class="chat-title">{{ currentChat?.nickname }}</span>
          </div>
          <div class="chat-content">
            <div class="message-list" ref="messageListRef">
              <div v-for="(msg, index) in chatMessages" :key="msg.id">
                <!-- 显示日期 -->
                <div v-if="shouldShowDate(msg, index)" class="message-date">
                  {{ formatDate(msg.time) }}
                </div>
                
                <div class="chat-message"
                     :class="{ 
                       'message-self': msg.fromId === userStore.userInfo.userId,
                       'shared-song': msg.type === 1 
                     }"
                     @click="handleMessageClick(msg)">
                  <div class="message-avatar">
                    <el-avatar :size="36" :src="msg.fromId === userStore.userInfo.userId ? userStore.userInfo.avatarUrl : currentChat?.avatarUrl" />
                  </div>
                  <div class="message-bubble">
                    <div class="message-text">
                      <template v-if="msg.type === 1">
                        <div class="song-message">
                          <div class="song-cover">
                            <img :src="msg.songData.albumPic" alt="album cover">
                            <div class="play-icon">
                              <i-bi-play-fill />
                            </div>
                          </div>
                          <div class="song-info">
                            <div class="song-name">{{ msg.content.split('\n')[0] }}</div>
                            <div v-if="msg.content.includes('\n')" class="song-trans">{{ msg.content.split('\n')[1] }}</div>
                            <div class="song-artists">{{ msg.songData.singer.map(s => s.name).join('/') }}</div>
                          </div>
                        </div>
                      </template>
                      <template v-else>
                        {{ msg.content }}
                      </template>
                    </div>
                    <div class="message-time">{{ formatMessageTime(msg.time) }}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="chat-input-wrapper">
              <div class="input-area">
                <el-input
                  v-model="messageInput"
                  type="textarea"
                  :rows="3"
                  placeholder="说点什么..."
                  resize="none"
                  @keydown.enter.prevent="handleEnter"
                />
                <div class="input-toolbar">
                  <div class="toolbar-left">
                    <el-button
                      class="emoji-btn"
                      text
                      @click.stop="toggleEmojiPicker">
                      <el-icon><ChatRound /></el-icon>
                    </el-button>
                  </div>
                  <div class="toolbar-right">
                    <el-button
                      type="primary"
                      :disabled="!messageInput.trim()"
                      @click="sendMessage">
                      发送
                    </el-button>
                  </div>
                </div>
              </div>

              <!-- 表情选择器 -->
              <div v-if="showEmojiPicker" class="emoji-picker-wrapper" @click.stop>
                <div class="emoji-grid">
                  <button
                    v-for="emoji in emojis"
                    :key="emoji"
                    class="emoji-btn"
                    @click="addEmoji(emoji)"
                  >
                    {{ emoji }}
                  </button>
                </div>
              </div>
            </div>
          </div>
      </div>
      </transition>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch, nextTick, onUnmounted } from 'vue'
import { getPrivateMsg,getPrivateMsgHistory } from "@/assets/apis/http"
import { PrivateMsg,Song } from "@/assets/apis/MusicDataType"
import util from "@/tools/util"
import { ArrowLeft, ChatRound } from '@element-plus/icons-vue'
import type { Ref } from 'vue'
import 'vue3-emoji-picker/css'
import emitter from '@/store/emitter'
import { usePlayStore } from '@/store/PlayStore'
import { useUserStore } from '@/store/UserStore'

const props = defineProps({
  userId: {
    type: Number,
    default: null
  }
})

const visible = ref(false)
const userStore = useUserStore()
const activeTab = ref('private')
const sixinList = reactive(<PrivateMsg[]>[])
const currentUserId = ref<number | null>(null)
const messageInput = ref('')
const chatMessages = ref([])
const currentChat: Ref<PrivateMsg | null> = ref(null)
const messageListRef = ref<HTMLElement | null>(null)
const showEmojiPicker = ref(false)
const transitionName = ref('slide-right')
const playstore = usePlayStore()

// 预定义表情
const emojis = [
  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣',
  '😊', '😇', '🙂', '🙃', '😉', '😌', '😍', '🥰',
  '😘', '😗', '😙', '😚', '😋', '😛', '😝', '😜',
  '🤪', '🤨', '🧐', '🤓', '😎', '🤩', '🥳', '😏',
  '❤️', '💔', '💖', '⭐', '❌'
]

// 监听 props.userId 的变化
watch(() => props.userId, (newVal) => {
  if (newVal) {
    const targetUser = sixinList.find(item => item.userId === newVal)
    if (targetUser) {
      openChat(targetUser)
    }
    show() // 确保弹窗显示
  }
})

// 打开聊天
async function openChat(user: PrivateMsg) {
  transitionName.value = 'slide-left'
  currentUserId.value = user.userId
  currentChat.value = user
  await getChatHistory(user.userId)
}

// 返回列表
function backToList() {
  transitionName.value = 'slide-right'
  currentUserId.value = null
  currentChat.value = null
  chatMessages.value = []
  messageInput.value = ''
}

// 显示弹窗
function show() {
  visible.value = true
}

// 隐藏弹窗
function hide() {
  visible.value = false
  backToList() // 重置状态
}

// 获取聊天历史记录
async function getChatHistory(userId: number) {
  try {
    const res = await getPrivateMsgHistory({uid: userId})
    console.log("获取聊天记录", res)
    if (res.msgs && res.msgs.length > 0) {
      chatMessages.value = res.msgs.reduce((acc, item) => {
        const msgJson = JSON.parse(item.msg)
        if (msgJson.type !== 1 && msgJson.type !== 6) return acc
        
        let content = ''
        let songData = <Song>{}
        if (msgJson.type === 1) {
          // 分享单曲消息
          const song = msgJson.song
          content = song.name
          if (msgJson.song.transNames?.length > 0) {
            content += `\n${msgJson.song.transNames[0]}`
          }
          // 保存歌曲数据用于点击播放
          songData = {
            id: song.id,
            name: song.name,
            publishTime: song.album.publishTime || 0,
            singer: song.artists.map(artist => ({
              id: artist.id,
              name: artist.name
            })),
            album: song.album.name,
            albumPic: util.formatSongsPic(song.album.picUrl, 50),
            duration: song.duration || 0,
            fee: song.fee,
            url: 'https://music.163.com/song/media/outer/url?id=' + song.id + '.mp3'
          }
        } else {
          content = msgJson.msg
        }
        
        if (content.trim()) {
          acc.push({
            id: item.id,
            fromId: item.fromUser.userId,
            content,
            time: item.time,
            type: msgJson.type,
            songData
          })
        }
        
        return acc
      }, [])

      chatMessages.value.sort((a, b) => a.time - b.time)
      await scrollToBottom()
    } else {
      chatMessages.value = []
    }
  } catch (error) {
    console.error('获取聊天记录失败:', error)
    chatMessages.value = []
  }
}

// 切换表情选择器
function toggleEmojiPicker() {
  showEmojiPicker.value = !showEmojiPicker.value
}

// 修改添加表情函数
function addEmoji(emoji: string) {
  messageInput.value += emoji
  // 不关闭表情选择器，让用户可以继续选择
}

// 点击其他区域时关闭表情选择器
function handleClickOutside(e: MouseEvent) {
  const target = e.target as HTMLElement
  if (!target.closest('.emoji-picker-wrapper') && !target.closest('.emoji-btn')) {
    showEmojiPicker.value = false
  }
}

// 处理回车发送
function handleEnter(e: KeyboardEvent) {
  if (!e.shiftKey) {
    sendMessage()
  }
}

// 格式化时间
function formatTime(timestamp: number) {
  return new Date(timestamp).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 发送消息后滚动到底部
async function scrollToBottom() {
  await nextTick()
  if (messageListRef.value) {
    messageListRef.value.scrollTop = messageListRef.value.scrollHeight
  }
}

// 修改发送消息函数
async function sendMessage() {
  if (!messageInput.value.trim()) return

  // TODO: 调用发送消息的 API
  chatMessages.value.push({
    id: Date.now(),
    content: messageInput.value,
    fromId: props.userId,
    time: Date.now()
  })

  messageInput.value = ''
  showEmojiPicker.value = false
  await scrollToBottom()
}

// 获取私信列表
async function getPrivateMsgList() {
    const res = await getPrivateMsg({limit:30,offset:0})
  console.log("查询私信", res)
    sixinList.push(...res.msgs.map(item=>{
      let msgJson = JSON.parse(item.lastMsg);
      let msg = msgJson.msg;
      let title = msgJson.title + "：";
      if(msgJson.type === 1){
        msg=msgJson.song.name;
      }else if(msgJson.type === 12){
        title=msgJson.promotionUrl.text+"：";
      }else if(msgJson.type === 6 || msgJson.type === 2 || msgJson.type === 23){
        title="";
      }
      return {
        lastMsgId:item.item,
        newMsgCount: item.newMsgCount,
        nickname:item.fromUser.nickname,
        userId:item.fromUser.userId,
        userType:item.fromUser.userType,
        avatarUrl:item.fromUser.avatarUrl,
        lastMsgTime:util.formatMsgTime(item.lastMsgTime),
        type:msgJson.type,
        title:title,
        msg:msg
      }
    }))
}

// 处理消息点击
async function handleMessageClick(msg: any) {
  if (msg.type === 1 && msg.songData) {
  
    if (playstore.isPlayed) {
    emitter.emit('playAudioType', 'play')
  }else{
    playstore.selectPlay([msg.songData])
  }
  }
}

// 判断是否需要显示日期
function shouldShowDate(msg: any, index: number) {
  if (index === 0) return true
  const prevMsg = chatMessages.value[index - 1]
  return !isSameDay(msg.time, prevMsg.time)
}

// 判断是否是同一天
function isSameDay(time1: number, time2: number) {
  const date1 = new Date(time1)
  const date2 = new Date(time2)
  return date1.toDateString() === date2.toDateString()
}

// 格式化日期
function formatDate(timestamp: number) {
  const date = new Date(timestamp)
  const today = new Date()
  const yesterday = new Date(today)
  yesterday.setDate(yesterday.getDate() - 1)

  if (date.toDateString() === today.toDateString()) {
    return '今天'
  } else if (date.toDateString() === yesterday.toDateString()) {
    return '昨天'
  } else {
    return `${date.getMonth() + 1}月${date.getDate()}日`
  }
}

// 格式化消息时间
function formatMessageTime(timestamp: number) {
  const date = new Date(timestamp)
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

onMounted(() => {
  getPrivateMsgList()
  document.addEventListener('click', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('click', handleClickOutside)
})

// 暴露方法给父组件
defineExpose({
  show,
  hide
})
</script>

<style lang="scss" scoped>
.message-panel {
  position: fixed;
  top: 60px;
  right: 0;
  width: 350px;
  height: calc(100vh - 160px);
  background-color: var(--el-fill-color-darker);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15);
  z-index: 5;
  border-radius: 10px;

  .drawer-content {
    position: relative;
    height: 100%;
    overflow: hidden; // 添加 overflow:hidden 以限制动画范围

    :deep(.el-tabs) {
      height: 100%;

      .el-tabs__header {
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: var(--el-fill-color-darker);
        margin: 0;
        padding: 10px 20px;

        .el-tabs__nav-wrap {
          &::after {
            display: none;
          }
        }

        .el-tabs__item {
          font-size: 14px;
          color: var(--el-text-color-regular);
          padding: 0 15px;

          &.is-active {
            color: var(--el-color-primary);
          }
        }
      }

      .el-tabs__content {
        height: calc(100% - 47px);
      }

      .el-tab-pane {
        height: 100%;
      }
    }

    .message-list {
      height: 100%;
      overflow-y: auto;

      &::-webkit-scrollbar {
        width: 6px;
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--el-border-color-lighter);
        border-radius: 3px;
      }

      &::-webkit-scrollbar-track {
        background-color: transparent;
      }

      &.empty-container {
        display: flex;
        align-items: center;
        justify-content: center;

        :deep(.el-empty) {
          padding: 40px 0;

          .el-empty__description {
            margin-top: 10px;
            color: var(--el-text-color-regular);
          }
        }
      }

      .message-item {
        cursor: pointer;
        transition: background-color 0.3s;
        border-bottom: 1px solid var(--el-border-color-lighter);

        &:hover {
          background-color: var(--transparent-1);
        }

        .message-item-content {
          display: flex;
          align-items: flex-start;
          padding: 12px 20px;
        }

        .avatar-wrapper {
          position: relative;
          margin-right: 12px;
          flex-shrink: 0;

          .vip-icon {
            position: absolute;
            right: -2px;
            bottom: -2px;
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            font-size: 12px;
            color: #fff;
            background-color: #f5bc49;
            border-radius: 50%;
            border: 2px solid var(--el-fill-color-darker);
          }
        }

        .message-info {
          flex: 1;
          min-width: 0;
          padding-top: 4px;

          .message-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;

            .nickname {
              font-size: 14px;
              font-weight: 500;
              color: var(--el-text-color-primary);
            }

            .time {
              font-size: 12px;
              color: var(--el-text-color-regular);
            }
          }

          .message-content {
            font-size: 13px;
            color: var(--el-text-color-regular);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
          }
        }
      }

      .message-date {
        text-align: center;
        margin: 20px 0;
        color: var(--el-text-color-secondary);
        font-size: 12px;
      }

      .chat-message {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 0 10px;

        &.message-self {
          flex-direction: row-reverse;
          
          .message-avatar {
            margin: 0 0 0 12px;
          }
          
          .message-bubble {
            background-color: var(--el-color-primary-light-9);
            color: var(--transparent-5);
            
            .message-time {
              text-align: right;
            }
          }
        }

        .message-avatar {
          margin-right: 12px;
          flex-shrink: 0;
        }

        .message-bubble {
          max-width: 75%;
          background-color: var(--el-fill-color-light);
          border-radius: 12px;
          padding: 0;
          position: relative;

          .message-text {
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
            color: var(---transparent-5);
            padding: 10px 12px;

            &:not(:has(.song-message)) {
              padding: 10px 12px;
            }

            .song-message {
              display: flex;
              align-items: center;
              padding: 0;
              background-color: var(--el-fill-color-darker);
              border-radius: 8px;
              overflow: hidden;
              
              .song-cover {
                position: relative;
                width: 50px;
                height: 50px;
                border-radius: 0;
                overflow: hidden;
                flex-shrink: 0;
                
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
                
                .play-icon {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(0, 0, 0, 0.3);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 1;
                  transition: opacity 0.2s;
                  
                  i {
                    font-size: 24px;
                    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
                  }
                }
              }
              
              .song-info {
                flex: 1;
                min-width: 0;
                padding: 8px 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: var(--transparent-5);
                
                .song-name {
                  font-weight: 500;
                  margin-bottom: 4px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 14px;
                }
                
                .song-trans {
                  font-size: 12px;
                  margin-bottom: 2px;
                }
                
                .song-artists {
                  font-size: 12px;
                }
              }
            }
          }

          .message-time {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            position: absolute;
            bottom: 6px;
            right: 12px;
            opacity: 0.8;
          }
        }

        &.shared-song {
          cursor: pointer;
          
          &:hover .message-bubble {
            &.message-self {
            }

            .song-message {
              background-color: var(--el-fill-color-dark);
            }

            .play-icon {
              background: rgba(0, 0, 0, 0.4);
              
              i {
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }
  }

  .chat-header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--el-fill-color-darker);
    border-bottom: 1px solid var(--el-border-color-lighter);

    .back-btn {
      margin-right: 15px;
      font-size: 18px;
      cursor: pointer;
    }

    .chat-title {
      font-size: 16px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }
  }

  .chat-content {
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;

    .message-list {
      flex: 1;
      overflow-y: auto;
      padding: 20px;

      .chat-message {
        display: flex;
        align-items: flex-start;
        margin-bottom: 20px;
        padding: 0 10px;

        &.message-self {
          flex-direction: row-reverse;
          
          .message-avatar {
            margin: 0 0 0 12px;
          }
          
          .message-bubble {
            background-color: var(--el-color-primary-light-9);
            
            .message-time {
              text-align: right;
            }
          }
        }

        .message-avatar {
          margin-right: 12px;
          flex-shrink: 0;
        }

        .message-bubble {
          max-width: 75%;
          background-color: var(--el-fill-color-light);
          border-radius: 12px;
          padding: 0;
          position: relative;
 

          .message-text {
            font-size: 14px;
            line-height: 1.5;
            word-break: break-word;
            color: var(--transparent-5);
            padding: 10px 12px;

            &:not(:has(.song-message)) {
              padding: 10px 12px;
            }

            .song-message {
              display: flex;
              align-items: center;
              padding: 0;
              background-color: var(--el-fill-color-darker);
              border-radius: 8px;
              overflow: hidden;
              color: var(--transparent-5);
              
              .song-cover {
                position: relative;
                width: 50px;
                height: 50px;
                border-radius: 0;
                overflow: hidden;
                flex-shrink: 0;
                
                img {
                  width: 100%;
                  height: 100%;
                  object-fit: cover;
                }
                
                .play-icon {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: rgba(0, 0, 0, 0.3);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  opacity: 1;
                  transition: opacity 0.2s;
                  
                  i {
                    font-size: 24px;
                    color: #fff;
                    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
                  }
                }
              }
              
              .song-info {
                flex: 1;
                min-width: 0;
                padding: 8px 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                color: var(--transparent-5);
                
                .song-name {
                  font-weight: 500;
                  margin-bottom: 4px;
                  white-space: nowrap;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  font-size: 14px;
               
                }
                
                .song-trans {
                  font-size: 12px;
                  margin-bottom: 2px;
                }
                
                .song-artists {
                  font-size: 12px;
                }
              }
            }
          }

          .message-time {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            position: absolute;
            bottom: 6px;
            right: 12px;
            opacity: 0.8;
          }
        }

        &.shared-song {
          cursor: pointer;
          
          &:hover .message-bubble {
            &.message-self {
            }

            .song-message {
              background-color: var(--el-fill-color-dark);
            }

            .play-icon {
              background: rgba(0, 0, 0, 0.4);
              
              i {
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }

    .chat-input-wrapper {
      position: relative;
      background-color: var(--el-fill-color-darker);
      border-top: 1px solid var(--el-border-color-lighter);

      .input-area {
        padding: 12px 12px 0px 12px;

        :deep(.el-textarea__inner) {
          border: none;
          background: transparent;
          padding: 12px;
          color: var(--el-text-color-primary);
          
          &:focus {
            box-shadow: none;
          }
        }

        .input-toolbar {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 8px 0;

          .toolbar-left {
            .emoji-btn {
              font-size: 20px;
              color: var(--el-text-color-secondary);
              padding: 4px 8px;

              &:hover {
                color: var(--el-text-color-primary);
              }
            }
          }

          .toolbar-right {
            .el-button {
              border-radius: 4px;
              padding: 8px 16px;
            }
          }
        }
      }

      .emoji-picker-wrapper {
        position: absolute;
        bottom: 100%;
        left: 0;
        width: 100%;
        background-color: var(--el-fill-color-darker);
        border: 1px solid var(--el-border-color-lighter);
        border-radius: 8px;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
        padding: 12px;
        z-index: 10;

        .emoji-grid {
          display: grid;
          grid-template-columns: repeat(8, 1fr);
          gap: 8px;

          .emoji-btn {
            background: none;
            border: none;
            padding: 8px;
            font-size: 20px;
            cursor: pointer;
            transition: transform 0.2s;
            border-radius: 4px;

            &:hover {
              background-color: var(--el-fill-color-light);
              transform: scale(1.1);
            }
          }
        }
      }
    }
  }

  // 添加页面容器样式
  .page-container {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--el-fill-color-darker);
  }

  // 修改过渡动画
  .slide-left-enter-active,
  .slide-left-leave-active,
  .slide-right-enter-active,
  .slide-right-leave-active {
    transition: transform 0.3s ease;
  }

  // 从右到左的动画
  .slide-left-enter-from {
    transform: translateX(100%);
  }
  
  .slide-left-leave-to {
    transform: translateX(-100%);
  }

  // 从左到右的动画
  .slide-right-enter-from {
    transform: translateX(-100%);
  }

  .slide-right-leave-to {
    transform: translateX(100%);
  }

  // 动画的初始和结束状态
  .slide-left-enter-to,
  .slide-left-leave-from,
  .slide-right-enter-to,
  .slide-right-leave-from {
    transform: translateX(0);
  }
}
</style>
